<template>
	<div class="sc">
		<header>
			<button @click="go(-1)">
				<i class="el-icon-arrow-left"></i>
			</button>
			<h3>我的收藏</h3>
			<i class="el-icon-star-off" style="margin-left: 0.3rem;"></i>
		</header>

		<div class="sp">


			<div class="nr">

				<div class="fm">
					<img :src="book.pic" />
					<span>仅剩{{book.stock}}本</span>
				</div>
				<div class="cz">
					<header>
						<span>{{book.name}}</span>
					</header>
					<footer>
						<span>￥{{book.price}}</span>
					</footer>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileSc',
		data() {
			return {
				book: {
					id: 8,
					sn: '98754466',
					name: " 数学绘本-让谁先吃好呢",
					author: '赵匡胤',
					salenum: 0,
					stock: 10,
					price: 29,
					marker: '工业大学出版社',
					tmake: 2016,
					info: '不是每个孩子都希望成为数学家，但是每个孩子都希望拥有一套数学绘本。',
					pic: require('@/assets/img/mobile/poster2.jpg')
				},
				num: 1,
			}
		},
		methods: {
			go(i) {
				this.$router.go(i);
			},
			toggle(i) {
				this.num = this.num + i;
				if (this.num < 1) {
					this.num = 1;
				}
			},
		}
	}
</script>

<style scoped>
	.sc {
		background-color: #f5d5a0;
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}

	.sc header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 1rem;
		margin-bottom: 1rem;
	}

	.sc header button {
		border: none;
		background-color: #f5d5a0;
		position: absolute;
		top: 1;
		left: 0;
	}

	.sp {
		width: 95%;
		margin: 0 auto;
		border: 1px solid white;
	}

	.sp .nr {
		display: flex;
		margin-top: 1rem;
	}

	.fm {
		width: 30%;
		display: flex;
		justify-content: center;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
		border-radius: 0 0 0.6rem 0.6rem;
	}

	.sp .nr .fm img {
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}

	.sp .nr .fm span {
		font-size: 0.7rem;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 0;
		left: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/* 单独设置某个角为圆角 */
		border-radius: 0 0 0.6rem 0.6rem;
	}

	.cz footer {
		margin-top: 7rem;
		margin-left: 1rem;
		display: flex;
	}

	.cz footer span {
		color: red;
	}

	.cz .btn {
		margin-left: 5rem;
	}
</style>